
<html>
<head>

    <title>搜索</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"></link>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <style>

  .cond-item { margin-right: 5px }
  .item {
    margin: 10px 20px 5px 0;
    font-size: 12px;
    text-align: center;
    width: 140px;
  }

  .item img {
    width: 98%;
    height: 180px;
  }

  .item p {
    margin: 5px 0 0;
    height: 30px;
    overflow: hidden;
  }

  .item p .name {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 2px;
  }

  .item p .score{
    margin-left: 2px;
  }

  .sep{
    padding: 5px;
    border-bottom: 1px solid #DDD;
  }

  [v-cloak] {
    display: none;
  }
</style>
</head>

<body>

<div id="app" v-cloak="" class="container" style="width: 800px; padding: 20px 0px;">

    <!-- 条件列表 -->
    <div class="row pb-1">
        <div class="col-md-2">
            <label>区域：</label>
        </div>

        <div class="col-md-10">
            <template v-for="item in conditions.regions">
                <button class="cond-item btn btn-sm"
                        v-bind:class="selectedClass('regions',item)"
                        v-on:click = "switchSelected('regions',item)">{{ item.tag }}
                </button>
            </template>
        </div>
    </div>
    <div class="row pb-1">
        <div class="col-md-2">
            <label>年代：</label>
        </div>

        <div class="col-md-10">
            <template v-for="item in conditions.periods">
                <button class="cond-item btn btn-sm"  v-bind:class="selectedClass('periods',item)" v-on:click = "switchSelected('periods',item)">{{ item.tag }}</button>
            </template>
        </div>
    </div>
    <div class="row pb-1">
        <div class="col-md-2">
            <label>语言：</label>
        </div>

        <div class="col-md-10">
            <template v-for="item in conditions.languages">
                <button class="cond-item btn btn-sm"  v-bind:class="selectedClass('languages',item)" v-on:click = "switchSelected('languages',item)">{{ item.tag }}</button>
            </template>
        </div>
    </div>
    <div class="row pb-1">
        <div class="col-md-2">
            <label>类别：</label>
        </div>

        <div class="col-md-10">
            <template v-for="item in conditions.sorts">
                <button class="cond-item btn btn-sm"  v-bind:class="selectedClass('sorts',item)" v-on:click = "switchSelected('sorts',item)">{{ item.tag }}</button>
            </template>
        </div>
    </div>

    <!-- 分隔符 -->
    <div class="row sep pt-3 pb-1">
    </div>

    <!-- 内容区域 -->
    <div class="row pb-1">
        <div class="col-md-12">
            <!-- 渲染电影列表 -->

            <!--加载中-->
            <div v-if="isloading == true">
                <div class="spinner-border m-5" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>

            <!--加载完毕-->
            <div v-else="">

                <!--空数据-->
                <div v-if="filmList.length == 0">
                    <h3 class="m-5">没有数据..</h3>
                </div>
                <!--展示列表-->
                <div v-else="">
                    <template v-for="(film, index) in filmList">
                        <a class="item float-left" target="_blank" href="#" v-on:click.prevent="showInfo(index)" v-bind:title="film.name" >
                            <div class="img-wp" >
                                <img class="img-thumbnail"
                                     onerror="this.src='/static/default.jpg'"
                                     v-bind:src="film.coverImgUrl" v-bind:alt="film.name">
                            </div>
                            <p class="clearfix"><strong class="name float-left">{{ film.name }}</strong> <span class="score text-warning float-left">{{ film.score | scoreFormat }}</span></p>
                        </a>
                    </template>
                </div>

                <!-- 分页 -->
                <div class="clearfix"></div>
                <div class="pt-5"></div>
                <nav class="float-left" v-if="pager != null" aria-label="Page navigation">
                    <ul class="pagination">

                        <!-- 首页 -->
                        <li v-if="pager.pageCount > 0 && 1 != pager.page " class="page-item">
                            <a class="page-link" href="#" v-on:click.prevent = "switchPage(1)">
                                <span>&laquo;</span>
                            </a>
                        </li>

                        <template v-for="n in pagerGroup">
                            <li class="page-item" v-bind:class="pager.page == n? 'active': ''">
                                <a class="page-link" href="#" v-on:click.prevent = "switchPage(n)">{{ n }}</a>
                            </li>
                        </template>

                        <!-- 末页 -->
                        <li v-if="pager.pageCount > 0 && pager.pageCount != pager.page" class="page-item">
                            <a class="page-link" href="#" v-on:click.prevent = "switchPage(pager.pageCount)">
                                <span>&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>

                <div class="float-right text-">
                    <small>总数： </small>
                    <span class="badge badge-success">{{ pager.totalCount }}</span>
                </div>
                <div class="clearfix"></div>

            </div>
        </div>
    </div>



    <!-- 模态对话框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">影片信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div v-if="current==null">
                        暂无...
                    </div>
                    <div v-else="">
                        <div class="row pb-4 border-bottom">
                            <div class="col-md-5">
                                <div class="img-wp float-left" >
                                    <img class="img-thumbnail" v-bind:src="current.coverImgUrl"
                                         style="height: 220px" v-bind:alt="current.name"
                                         onerror="this.src='/static/default.jpg'">
                                </div>
                            </div>

                            <div class="col-md-7">
                                <h5>
                                    <a v-bind:href="current.url" class="text-dark" target="_blank">{{current.name}}</a>
                                    &nbsp; <span class="badge badge-success">{{ current.score | scoreFormat}}</span>
                                </h5>
                                <p></p>
                                <h6>地区：{{ current.regions | concat }}</h6>
                                <h6>年代：{{ current.period }}</h6>
                                <h6>语言：{{ current.languages | concat }}</h6>
                                <h6>片长：{{ current.during }}</h6>
                                <h6>上映日期：{{ current.releaseDate }}</h6>
                                <p style="max-height:50px; overflow:hidden">
                                    <template v-for="sort in current.sorts">
                                        <span class="badge badge-pill badge-secondary">{{ sort }}</span>&nbsp;
                                    </template>
                                </p>
                            </div>

                        </div>

                        <div class="row border-top" >
                            <p class="mt-4 mx-4 mb-2 text-dark" style="max-width: 99%; height: 220px; font-size: 14px; line-height: 2em; overflow: auto; text-overflow: ellipsis;">
                                <strong>简介：</strong>&nbsp;{{ current.intro }}
                            </p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



</div>

<script type="text/javascript" th:src="@{/static/film.js}"></script>

</body>



</html>


